<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection" />
<title>会员服务</title>
<!-- <link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css"> -->
<link rel="stylesheet" href="${contextPath}/views/css/payStyle.css">


</head>
<body>
	<%-- <div>
		<p style="font-weight: bold;">感谢您选择我司提供的会员服务，在您完成支付后，即可成为我司会员，可享受：</p>
		<ol style="text-indent: 20px;">
			<li>1、AI智能精选及推荐服务</li>
			<li>2、一对一专属会员经理服务</li>
			<li>3、服务全程可追溯，充分保障您的权益</li>
			<li>4、您购买会员卡后将获得专享会员优待特权，您可凭此卡号享受优质产品推荐资格（具体资格见活动详情）。</li>
			<li>5、会员卡卡费采用一次性收费机制，会员费用会根据市场情况及本公司业务发展情况随时调整。</li>
		</ol>
	</div>
	<div class="ui-form" style="width: 100%; height: 200px; margin: 40px 10px 20px 10px;">
		<div style="font-size: 16px; margin: 10px 10px 10px 10px; color: red; height: 38px; line-height: 38px; font-weight: bold;">
			<font style="font-size: 31px; position: relative; top: 11px;">*</font>支付会员费
		</div>
		<div class="ui-form-item">
			<input name="phone" type="tel" maxlength="11" value="${phoneNo}" readonly="readonly" unselectable="on" onfocus="this.blur()"
			placeholder="客户手机号" style="width: 90%;">
		</div>
		<div id="moneyBtns" class="ui-form-item">
			<button class="ui-btn" value="500">500元</button>
			<button class="ui-btn" value="900">900元</button>
			<button class="ui-btn" value="1200">1200元</button>
			<button class="ui-btn" value="1500">1500元</button>
		</div>
		<div id="custMoney" class="ui-input-wrap" style="background-color: white; display: block; padding-top: 2px;">
			<div class="ui-input ui-border-radius" style="border: 0px; width: 70px; float: left;">
				<input type="number" min="1" max="10000" placeholder="自定义金额">
			</div>
			<button id="custMoneyBtn" class="ui-btn ui-btn-primary" style="display: none; border: 0px;">立即支付</button>
		</div>
	</div>
	<div>
		<p style="font-weight: bold;">注：</p>
		<ol style="text-indent: 20px;">
			<li>1、您申请付款即表示您已同意并知悉《会员协议》。</li>
			<li>2、支付成功后将电子凭证发送至该微信公众号，并提供您的姓名和手机号。</li>
		</ol>
	</div> --%>
	
	<div class="head-div"><span>会员服务</span></div>
	
	<div class="card-div">
		<p class="phoneno-p">客户手机号: ${phoneNo}</p>
		<button class="payAmt-left-btn" value="500">500元</button>
		<button class="payAmt-btn" value="900">900元</button>
		<button class="payAmt-btn" value="1200">1200元</button>
		<button class="payAmt-left-btn" value="1500">1500元</button>
		<input id="custMoney" type="text" min="1" max="10000" maxlength="5" placeholder="自定义金额">
		<button id="custMoneyBtn" class="pay-btn">立即支付</button>
		<p class="word-p">*选择以上对应会员费进行支付</p>
	</div>
	
	<div class="vip-server-one" style="height: 32px;">
		<span></span> <a>一对一专属会员经理服务。 </a>
	</div>
	<div class="vip-server-two" style="height: 32px; margin-top: 5px;">
		<span></span> <a>AI智能精选及推荐服务。</a>
	</div>
	<div class="vip-server-three" style="height: 32px; margin-top: 5px;">
		<span></span> <a>服务全程可追溯，充分保障您的权益。 </a>
	</div>
	<div class="vip-server-four" style="height: 32px; margin-top: 5px;">
		<span></span> <a>您购买会员卡后将获得专享会员优待特权，您可凭此卡号享受优质产品推荐资格(具体资格见活动详情)。 </a>
	</div>
	<div class="vip-server-five" style="height: 32px; margin-top: 35px;">
		<span></span> <a>会员卡卡费采用一次性收费机制，会员费用会根据市场情况及本公司业务发展情况随时调整。</a>
	</div>
	
	<p class="attention-head">注：</p>
	<p class="attention-one">1.您申请付款即表示您已同意并知悉《会员协议》</p>
	<p class="attention-two">2.支付成功后将电子凭证发送至该微信公众号，并提供您的姓名和手机号</p>
	
	
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		/* $(".ui-form-item").find("input").change(function() {
			var $this = $(this);
			var $parent = $this.parent();
			if ($this.val())
				$parent.find(".ui-icon-close").fadeIn(300);
			else
				$parent.find(".ui-icon-close").fadeOut(300);
		});

		if ($(".ui-form-item").find("input").val())
			$(".ui-form-item").find(".ui-icon-close").show();

		$(".ui-form-item").find(".ui-icon-close").click(function() {
			var $this = $(this);
			var $parent = $this.parent();
			$parent.find("input").val("");
			$this.fadeOut(300);
		}); */

		/**默认金额支付按钮**/
		$('.payAmt-left-btn').click(function(){
			pay($(this).val());
		});
		
		$('.payAmt-btn').click(function(){
			pay($(this).val());
		});

		/**自定义金额支付按钮**/
		$("#custMoneyBtn").click(function() {
			var $money = $(this).parent().find("input");
			var money = $money.val();
			if (!money) {
				alert("输入的金额为空！");
				$money.focus();
				return false;
			}
			pay(money);
		});

		//输入框与按钮联动效果
		$("#custMoney").keyup(function() {
			var $this = $(this);
			var $button = $("#custMoneyBtn");
			if ($this.val())
				$button.show();
			else
				$button.hide();
		});
	});

	/**支付**/
	function pay(money) {
		if (!WeixinJSBridge) {
			alert("非法操作！");
			return;
		}
		if (money <= 0) {
			alert("支付金额必须大于0！");
			return;
		}
		$.ajax({
			url : "${contextPath}/wechat/pay/pre",
			type : "post",
			dataType : "json",
			data : JSON.stringify({
				params : {
					money : money
				}
			}),
			cache : false,
			contentType : "application/json",
			beforeSend : function(xhr) {
			},
			success : function(res, succ, xhr) {
				if (res) {
					if (res.success) {
						WeixinJSBridge.invoke('getBrandWCPayRequest', res.map, function(res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								alert("支付成功！");
							}
						});
					} else {
						if (res.msg)
							alert(res.msg);
					}
				}
			},
			error : function(xhr, errorType, errorInfo) {
				alert("请求错误！");
			},
			complete : function(xhr, ts) {
			}
		});
	}
</script>
</html>